<!--
 * @Author: your name
 * @Date: 2021-09-17 19:38:16
 * @LastEditTime: 2022-03-17 16:29:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \custom-appd:\custom-app\src\modules\FormCenter\components\fieldResource\index.vue
-->
<template>
  <div class="resource" :style="{ '--theme-color': theme }">
    <fks-empty v-if="isErrorReq">{{ errorReqMsg }}</fks-empty>
    <div v-else class="work-resources">
      <div class="from-resources-title" style="font-size: 16px">表单资源</div>
      <div class="form-resources" v-if="formList.length > 0">
        <div
          class="form-resources-item"
          @click="viewForm(item)"
          v-for="item in formList"
          :key="item.bizId"
        >
          <!-- <div class="item-image">
              <img src="" alt="" style="width: 100%;height: 100%">
            </div> -->
          <svg-icon
            style="
              font-size: 24px;
              color: var(--theme-color);
              margin-right: 16px;
            "
            class="svg-icon"
            :icon-class="item.formType == 0 ? 'node-approve' : 'node-form'"
          ></svg-icon>
          <fks-tooltip effect="dark" :content="item.formName" placement="top">
            <div class="item-desc">{{ item.formName }}</div>
          </fks-tooltip>
        </div>
      </div>
      <p class="empty-resources" v-else>暂无表单资源</p>
      <fks-divider></fks-divider>
      <div class="field-resources">
        <div class="field-resources-title" style="font-size: 16px">
          字段资源
        </div>
        <div class="field-resources-main">
          <ul style="width: 100%" v-if="inputResource.length > 0">
            <li
              class="field-form-name"
              prop="name"
              v-for="(form, index) in inputResource"
              :key="index"
            >
              <div class="title">
                <div class="dot-icon"></div>
                {{ form.formName }}
              </div>
              <div class="field-form-content">
                <parser
                  ref="parser"
                  :key="index"
                  :form-conf.sync="form.formConf"
                  :flow-conf="formPermission"
                  :no-rules="true"
                />
              </div>
            </li>
          </ul>
          <p v-else class="empty-resources">暂无字段资源</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResource } from './api'
import * as types from '@/store/Getter/getterTypes.js'
import Parser from '@/modules/FormCenter/componentsWp/parser/Parser.vue'
export default {
  name: 'fieldResource',
  components: { Parser },
  props: {
    processInstanceId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isErrorReq: false,
      errorReqMsg: '',
      formList: [],
      wpName: '',
      inputResource: [],
      form: {},
      formPermission: {}
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    }
  },
  methods: {
    getResource() {
      getResource(this.processInstanceId).then((res) => {
        if (res.status && res.data) {
          this.formList = res.data.formResourceInfo
          this.$emit('update:wpName', res.data.wpName)
          this.inputResource = JSON.parse(
            JSON.stringify(res.data.inputResourceInfo)
          )
          this.inputResource.forEach((info) => {
            this.fillFormData(info)
            let fieldsArr = []
            info.formFieldInfo.forEach((item) => {
              fieldsArr.push(item.field)
              this.$set(this.formPermission, item.field, 'readonly')
            })
            let formConf = JSON.parse(info.formDesign)
            formConf.fields.forEach((item, index) => {
              info.formFieldInfo.forEach((fieldInfo) => {
                if (fieldInfo.field == item.__vModel__) {
                  this.$set(item.__config__, 'defaultValue', fieldInfo.value)
                }
              })
            })
            let conf = {
              fields: formConf.fields.filter((item) => {
                return fieldsArr.indexOf(item.__vModel__) !== -1
              }),
              ...JSON.parse(res.data.formDesign).formConf
            }
            this.$set(info, 'formConf', conf)
          })
        } else {
          this.isErrorReq = true
          this.errorReqMsg = '相关资源加载异常'
        }
      })
    },
    viewForm(item) {
      item.moduleName = item.formName
      this.$emit('viewForm', item)
    },
    fillFormData(form) {
      form.formFieldInfo.forEach((item) => {
        let val = item.value
        if (
          item.tagAttribute === 'time-range' ||
          item.tagAttribute === 'date-range' ||
          item.tagAttribute === 'cascader' ||
          item.tagAttribute === 'check-box' ||
          item.tagAttribute == 'detail-table' ||
          item.tagAttribute == 'association-form' ||
          (item.tagAttribute === 'select' && item.multiple)
        ) {
          let transValue = val.split(',')
          item.value = JSON.parse(transValue)
        } else if (
          item.tagAttribute === 'slider' ||
          item.tagAttribute === 'rate'
        ) {
          // data中的val都是string类型
          item.value = typeof val === 'string' ? JSON.parse(val) : val
        } else if (
          item.tagAttribute === 'user-selector' ||
          item.tagAttribute === 'org-selector' ||
          item.tagAttribute === 'information'
        ) {
          // 选人选组件应为对象
          item.value = typeof val === 'string' ? JSON.parse(val) : val
        } else if (item.tagAttribute === 'switch') {
          // 开关组件
          item.value = val === 'true' ? true : false
        } else {
          item.value = val
        }
      })
    }
  },
  mounted() {
    //初始化
    // this.initial()
  },
  watch: {
    processInstanceId: {
      handler(val) {
        this.getResource()
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.form-resources {
  width: 100%;
  display: flex;
  padding-top: 16px;
  .form-resources-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #eee;
    margin-right: 16px;
    padding: 10px;
    cursor: pointer;
    .item-desc {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 40px);
    }
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    // background-color: #e2efed;
  }
}
.empty-resources {
  color: #ccc;
  font-size: 12px;
}
.field-resources,
.field-resources-main {
  width: 100%;
  .field-form-name {
    .title {
      width: 100%;
      height: 19px;
      line-height: 19px;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 24px 10px;
    }
    .dot-icon {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #2f53ea;
      border-radius: 50%;
      margin-right: 6px;
    }
    .field-form-content {
      padding: 0 26px;
    }
  }
}
::v-deep .fks-divider--horizontal {
  margin: 16px 0;
}
</style>
